<template>
  <!-- v-bind="footer" -->
  <t-modal
    title="导入"
    width="800px"
    :visible="visible"
    :destroyOnClose="true"
    @ok="handleOk"
    @cancel="closeModal"
    wrapClassName="import-modal-container"
  >
    <div class="custom-body">
      <a-form-model :model="form" :rules="rules" ref="ruleForm">
        <a-form-model-item label="所属机构">
          <a-input v-model="form.orgName" disabled />
        </a-form-model-item>
        <a-form-model-item
          label="岗位导入"
          prop="fileList"
          :rules="{
            required: true,
            message: '请选择文件',
          }"
        >
          <bjUploadFile
            type="excel"
            :count="1"
            v-model="form.fileList"
            @change="upLoadFileChange($event)"
            :replaceFields="{
              fileName: 'fileName',
              fileSize: 'fileSize',
              fileType: 'fileType',
            }"
          ></bjUploadFile>
        </a-form-model-item>
      </a-form-model>
    </div>
  </t-modal>
</template>

<script>
import { axios } from "@/utils/request";
import bjUploadFile from "@/components/extendCustom/bj-upload-file";
export default {
  components: {
    bjUploadFile,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    parameter: {
      type: Object,
      default: {},
    },
    footer: {
      type: Object,
      default() {
        return {
          footer: null,
        };
      },
    },
  },
  data() {
    return {
      rules: {},
      form: {
        fileList: [],
      },
    };
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.form = { ...this.parameter, ...this.form };
        }
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    upLoadFileChange({ file, index }) {
      this.$set(this.form["fileList"][index], "loading", true);
      setTimeout(() => {
        this.$set(this.form["fileList"][index], "loading", false);
      }, 500);
    },
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let { fileList, id } = this.form;
          let formData = new FormData();
          formData.append("orgId", id);
          formData.append("uploadFile", fileList[0].file);
          axios
            .post(`/mdata/sysPosition/importData`, formData, {
              headers: {
                "Content-Type": "multipart/form-data",
              },
            })
            .then((res) => {
              if (res.statusCode == 200) {
                this.closeModal();
                this.$parent.getRefresh();
                this.$message.success(res.message);
              } else {
                this.$message.error(res.message);
              }
            })
            .catch((_) => {});
        }
      });
    },
    //关闭弹窗
    closeModal() {
      this.form = {
        fileList: [],
      };
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.import-modal-container {
  .custom-body {
    max-height: 700px;
    overflow: auto;
  }
  .bj-upload-file {
    .choosed-file-warp {
      width: 100%;
    }
  }
  .ant-form-item {
    display: flex;
    .ant-form-item-label {
      flex-shrink: 0;
      width: 100px;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
}
</style>
